<template>
	<gui-page>
		<!-- 吸顶 view -->
		<view class="fixed-top-view gui-bg-green" slot="gFixedTop">
			<!-- 头部横向日期 -->
			<scroll-view class="gui-scroll-x" :scroll-x="true" :scroll-with-animation="true"
				:scroll-into-view="'scrollItem'+currentIndex">
				<view class="gui-scroll-x-items" style="width: 180rpx;" v-for="(item, index) in daysList" :key="index"
					:class="[currentIndex == index ? 'gui-scroll-day-active' : '']" @tap="changeDay(index)"
					:id="'scrollItem'+index">
					<text class="gui-scroll-items-date" :class="[currentIndex == index ? 
					'gui-scroll-day-active' : '']">{{item.day}}</text>
					<text class="gui-scroll-items-week" :class="[currentIndex == index ? 
					'gui-scroll-day-active' : '']">{{item.week}}</text>
				</view>
			</scroll-view>
		</view>
		<!-- 对应日期的数据列表 -->
		<!-- 列表数据请根据选择的日期动态读取并渲染  -->
		<!-- 不建议使用选项卡模式 数据量大运行会卡顿 -->



		<view class="gui-list" slot="gBody" style="padding-top:120rpx;">

			<gui-empty v-if="paiban_arr.length==0">
				<view slot="img" class="gui-flex gui-rows gui-justify-content-center">
					<!-- 请根据您的项目要求制作并更换为空图片 -->
					<image class="gui-empty-img" :src="empty_img"></image>
				</view>
				<text slot="text" class="gui-text-small gui-block-text gui-text-center gui-margin-top"
					style="color:#9DABFF;">暂无排班</text>
			</gui-empty>

			<view class="gui-list-items" v-for="(item, index) in paiban_arr" :key="index">
				<view class="gui-list-body gui-border-b">
					<view class="gui-list-title">
						<text class="gui-list-title-text">{{item.title}}</text>
					</view>
					<view class="gui-flex gui-rows gui-nowrap gui-align-items-center">
						<text class="gui-list-body-desc"></text>
						<text class="price">￥{{item.money}}</text>
					</view>
				</view>
				<view class="button" hover-class="gui-tap" @tap="appointment(item.title,item.day,item.money,item.week)"
					v-if="item.is_disable==0">
					<text class="button-text gui-block-text gui-color-white">预约</text>
				</view>

				<view class="button gui-bg-gray" hover-class="gui-tap" v-if="item.is_disable==1">
					<text class="button-text gui-block-text gui-color-black">约满</text>
				</view>
			</view>



		</view>
	</gui-page>
</template>
<script>
	// 模拟日期
	var graceJS = require("@/GraceUI5/js/grace.js");
	// 起始日期, 格式 2019-08-01，例如今天
	var startDay = graceJS.now('number');
	var daysList = [];
	// 区间天数 以14天为例
	var weekday = ["周日", "周一", "周二", "周三", "周四", "周五", "周六"];
	for (let i = 0; i < 14; i++) {
		var timeStamp = startDay + (i * 3600 * 24000);
		var daysArr = graceJS.toDate(timeStamp, 'array');
		var obj = {};
		obj.day = daysArr[0] + '-' + daysArr[1] + '-' + daysArr[2];
		var date = new Date();
		date.setTime(timeStamp);
		obj.week = weekday[date.getDay()];
		daysList.push(obj)
	}
	export default {
		data() {
			return {
				lists: [],
				empty_img: this.empty_img,
				daysList: daysList,
				paiban_arr: [],
				currentIndex: 0,
				teacher_id: 0,
				week_obj: {
					'周一': 1,
					'周二': 2,
					'周三': 3,
					'周四': 4,
					'周五': 5,
					'周六': 6,
					'周日': 7
				}
			}
		},
		onLoad: function(query) {
			if (typeof query.id != 'undefined') {
				this.teacher_id = query.id;
				this.$globalMethod();
				var week = this.daysList[this.currentIndex].week;
				console.log(week);
				console.log(this.week_obj[week]);
				this.paiban_list(this.week_obj[week], this.daysList[this.currentIndex].day);
			}
		},
		methods: {
			change1: function(e) {
				console.log(e);
			},
			//03 底部弹出模式
			open3: function() {
				this.$refs.guipopup3.open();
			},
			close3: function() {
				this.$refs.guipopup3.close();
			},
			appointment(title, day, money,week) {

				uni.navigateTo({
					url: '/pages/order/choose_shop?teacher_id=' + this.teacher_id + '&time=' + title + '&day=' +
						day + '&money=' + money+'&week='+week
				})

				// let _this = this;
				// _this.graceJS.get(_this.serverUrl + '/api.shop/get_teacher_shop_list', {
				// 	teacher_id: _this.teacher_id
				// }, {
				// 	token: _this.token
				// }, (res) => {
				// 	if (res.code == 0) {
				// 		_this.lists = res.data.list;
				// 		_this.open3();
				// 	} else {
				// 		uni.showToast({
				// 			title: res.msg,
				// 			icon: 'none'
				// 		})
				// 	}
				// }, (e) => {
				// 	uni.showToast({
				// 		title: '网络请求错误，请稍后再试',
				// 		icon: 'none'
				// 	})
				// })
			},
			paiban_list(week, day) {
				let _this = this;
				_this.graceJS.get(_this.serverUrl + '/api.teacher/get_day_paiban', {
					teacher_id: _this.teacher_id,
					week: week,
					day: day
				}, {
					token: _this.token
				}, (res) => {
					if (res.code == 0) {
						_this.paiban_arr = res.data.list;
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
					}
				}, (e) => {
					uni.showToast({
						title: '网络请求错误，请稍后再试',
						icon: 'none'
					})
				})
			},
			changeDay: function(index) {
				var selectedDay = this.daysList[index];
				console.log(selectedDay);
				this.currentIndex = index;

				var current_week = this.week_obj[this.daysList[this.currentIndex].week];

				this.paiban_list(current_week, this.daysList[this.currentIndex].day);
			}
		}
	}
</script>
<style scoped>
	.gui-scroll-x {
		background-color: #F5F6F8;
	}

	.gui-scroll-x-items {
		width: 150rpx;
		margin: 0;
		padding: 12rpx 0;
		flex-direction: column;
	}

	.gui-scroll-items-date {
		font-size: 28rpx;
		line-height: 50rpx;
		text-align: center;
	}

	.gui-scroll-items-week {
		font-size: 22rpx;
		line-height: 36rpx;
		margin-bottom: 10rpx;
		text-align: center;
	}

	.gui-list-items {
		position: relative;
	}

	.gui-scroll-day-active {
		background-color: #008AFF;
		color: #FFFFFF;
	}

	.price {
		color: #FF9B00;
		font-size: 24rpx;
		margin-left: 20rpx;
	}

	.button {
		position: absolute;
		right: 8px;
		bottom: 15px;
		background-color: #008AFF;
		width: 100rpx;
		height: 50rpx;
		border-radius: 50rpx;
	}

	.button-text {
		font-size: 24rpx;
		line-height: 50rpx;
		text-align: center;
		border-radius: 50rpx;
	}

	.demo-close {
		width: 100rpx;
		height: 100rpx;
		line-height: 100rpx;
		opacity: 0.88;
		text-align: center;
		font-size: 58rpx;
	}

	.demo-lr {
		flex: 1;
		height: 200rpx;
	}

	.demo-lr-items {
		height: 120rpx;
		line-height: 120rpx;
		text-align: center;
		overflow: hidden;
	}
</style>